<template>
    <div id="fire-top">
        <ul>
            <li>
                <div class="fire-col" style="width: 22%;">
                    <p class="same-s">申请单位</p>
                </div>
                <div class="fire-col" style="width: 28%;">
                    <p class="same-s left-p">{{ jobData.v_OrgName }}</p>
                </div>
                <div class="fire-col" style="width: 22%;">
                    <p class="same-s">作业申请时间</p>
                </div>
                <div class="fire-col" style="width: 28%;">
                    <p class="same-s left-p">
                        <template v-if="jobData.d_ApplyTime">
                            {{ splitDate(jobData.d_ApplyTime)[0] }} 年 
                            {{ splitDate(jobData.d_ApplyTime)[1] }} 月 
                            {{ splitDate(jobData.d_ApplyTime)[2] }} 日
                            {{ splitDate(jobData.d_ApplyTime)[3] }} 时
                            {{ splitDate(jobData.d_ApplyTime)[4] }} 分
                        </template>
                    </p>
                </div>
            </li>

            <li>
                <div class="fire-col" style="width: 22%;">
                    <p class="same-s">作业地点</p>
                </div>
                <div class="fire-col" style="width: 28%;">
                    <p class="same-s left-p">{{ jobData.v_JobAddress }}</p>
                </div>
                <div class="fire-col" style="width: 22%;">
                    <p class="same-s">作业内容</p>
                </div>
                <div class="fire-col" style="width: 28%;">
                    <p class="same-s left-p">{{ jobData.v_JobContent }}</p>
                </div>
            </li>

            <li>
                <div class="fire-col" style="width: 22%;">
                    <p class="same-s">电源接入点</p>
                </div>
                <div class="fire-col" style="width: 28%;">
                    <p v-if="jobData.jobApplyFormEle" class="same-s left-p"><span v-if="jobData.jobApplyFormEle.v_AccessPoint">{{ jobData.jobApplyFormEle.v_AccessPoint }}</span></p>
                </div>
                <div class="fire-col" style="width: 22%;">
                    <p class="same-s">工作电压</p>
                </div>
                <div class="fire-col" style="width: 28%;">
                    <p v-if="jobData.jobApplyFormEle" class="same-s left-p"><span v-if="jobData.jobApplyFormEle.n_Voltage">{{ jobData.jobApplyFormEle.n_Voltage }}</span></p>
                </div>
            </li>

            <li>
                <div class="fire-col" style="width: 14%;">
                    <p class="same-s">用电设备功率</p>
                </div>
                <div class="fire-col" style="width: 30%;">
                    <p v-if="jobData.jobApplyFormEle" class="same-s left-p"><span v-if="jobData.jobApplyFormEle.v_EquipmentPower">{{ jobData.jobApplyFormEle.v_EquipmentPower }}</span></p>
                </div>
                <div class="fire-col" style="width: 10%;">
                    <p class="same-s">监护人</p>
                </div>
                <div class="fire-col" style="width: 18%;">
                    <p v-if="jobData.jobApplyFormEle" class="same-s left-p"><span v-if="jobData.jobApplyFormEle.v_Guardian">{{ jobData.jobApplyFormEle.v_Guardian }}</span></p>
                </div>
                <div class="fire-col" style="width: 10%;">
                    <p class="same-s">用电人</p>
                </div>
                <div class="fire-col" style="width: 18%;">
                    <p v-if="jobData.jobApplyFormEle" class="same-s left-p"><span v-if="jobData.jobApplyFormEle.v_ElectricityCustomer">{{ jobData.jobApplyFormEle.v_ElectricityCustomer }}</span></p>
                </div>
            </li>

            <li>
                <div class="fire-col" style="width: 22%;">
                    <p class="same-s">作业人</p>
                </div>
                <div class="fire-col" style="width: 28%;">
                    <p class="same-s left-p" v-if="jobData.v_Worker">{{ jobData.v_Worker }}</p>
                </div>
                <div class="fire-col" style="width: 22%;">
                    <p class="same-s">电工证号</p>
                </div>
                <div class="fire-col" style="width: 28%;">
                    <p class="same-s left-p" v-if="jobData.v_WorkerCertificateNo">{{ jobData.v_WorkerCertificateNo }}</p>
                </div>
            </li>

            <li>
                <div class="fire-col" style="width: 35%;">
                    <p class="same-s">关联的其他特殊作业及安全作业票编号</p>
                </div>
                <div class="fire-col" style="width: 65%;">
                    <p class="same-s left-p" v-if="jobData.v_RelaApplyNOs">{{ jobData.v_RelaApplyNOs }}</p>
                </div>
            </li>

            <li>
                <div class="fire-col" style="width: 22%;">
                    <p class="same-s">风险辨识结果</p>
                </div>
                <div class="fire-col" style="width: 78%;">
                    <p class="same-s left-p">{{ jobData.v_RiskIdentificationResult }}</p>
                </div>
            </li>

            <li>
                <div class="fire-col" style="width: 100%;">
                    <p class="same-s">可燃气体分析(运行的生产装置、罐区合具有火灾爆炸危险场所)</p>
                </div>
            </li>

            <li>
                <div class="fire-col" style="width: 14%;">
                    <p class="same-s">分析时间</p>
                </div>
                <div class="fire-col" style="width: 24%;">
                    <p class="same-s">
                        <span v-if="jobData.airAnalysises && jobData.airAnalysises[0] && jobData.airAnalysises[0].d_AirAnalysisTime">{{ splitDate(jobData.airAnalysises[0].d_AirAnalysisTime)[3] }}</span> 时
                        <span v-if="jobData.airAnalysises && jobData.airAnalysises[0] && jobData.airAnalysises[0].d_AirAnalysisTime">{{ splitDate(jobData.airAnalysises[0].d_AirAnalysisTime)[4] }}</span> 分
                    </p>
                </div>
                <div class="fire-col" style="width: 24%;">
                    <p class="same-s">
                        <span v-if="jobData.airAnalysises && jobData.airAnalysises[1] && jobData.airAnalysises[1].d_AirAnalysisTime">{{ splitDate(jobData.airAnalysises[1].d_AirAnalysisTime)[3] }}</span> 时
                        <span v-if="jobData.airAnalysises && jobData.airAnalysises[1] && jobData.airAnalysises[1].d_AirAnalysisTime">{{ splitDate(jobData.airAnalysises[1].d_AirAnalysisTime)[4] }}</span> 分
                    </p>
                </div>
                <div class="fire-col" style="width: 14%;">
                    <p class="same-s">分析点</p>
                </div>
                <div class="fire-col" style="width: 24%;">
                    <p class="same-s left-p">
                        <template v-if="jobData.airAnalysises && jobData.airAnalysises[0] && jobData.airAnalysises[0].v_AirAnalystsObj">
                            {{ jobData.airAnalysises[0].v_AirAnalystsObj }}
                        </template>
                    </p>
                </div>
            </li>

            <li>
                <div class="fire-col" style="width: 14%;">
                    <p class="same-s">可燃气体检测结果</p>
                </div>
                <div class="fire-col" style="width: 24%;">
                    <p class="same-s left-p">
                        <template v-if="jobData.airAnalysises && jobData.airAnalysises[0] && jobData.airAnalysises[0].v_AirAnalysisResult">
                            {{ jobData.airAnalysises[0].v_AirAnalysisResult }}
                        </template>
                    </p>
                </div>
                <div class="fire-col" style="width: 24%;">
                    <p class="same-s left-p">
                        <template v-if="jobData.airAnalysises && jobData.airAnalysises[1] && jobData.airAnalysises[1].v_AirAnalysisResult">
                            {{ jobData.airAnalysises[1].v_AirAnalysisResult }}
                        </template>
                    </p>
                </div>
                <div class="fire-col" style="width: 14%;">
                    <p class="same-s">分析人</p>
                </div>
                <div class="fire-col" style="width: 24%;">
                    <p class="same-s left-p">
                        <template v-if="jobData.airAnalysises && jobData.airAnalysises[0] && jobData.airAnalysises[0].v_AirAnalystsName">
                            {{ jobData.airAnalysises[0].v_AirAnalystsName }}
                        </template>
                    </p>
                </div>
            </li>

            <li>
                <div class="fire-col" style="width: 14%;">
                    <p class="same-s">作业实施时间</p>
                </div>
                <div class="fire-col" style="width: 86%;">
                    <p class="same-s">
                        <span>自</span>
                        <span v-if="jobData.d_IntendedStartTime">{{ splitDate(jobData.d_IntendedStartTime)[0] }}</span> 年 
                        <span v-if="jobData.d_IntendedStartTime">{{ splitDate(jobData.d_IntendedStartTime)[1] }}</span> 月 
                        <span v-if="jobData.d_IntendedStartTime">{{ splitDate(jobData.d_IntendedStartTime)[2] }}</span> 日
                        <span v-if="jobData.d_IntendedStartTime">{{ splitDate(jobData.d_IntendedStartTime)[3] }}</span> 时
                        <span v-if="jobData.d_IntendedStartTime">{{ splitDate(jobData.d_IntendedStartTime)[4] }}</span> 分<span>至</span>
                        <span v-if="jobData.d_IntendedCompletionTime">{{ splitDate(jobData.d_IntendedCompletionTime)[0] }}</span> 年 
                        <span v-if="jobData.d_IntendedCompletionTime">{{ splitDate(jobData.d_IntendedCompletionTime)[1] }}</span> 月 
                        <span v-if="jobData.d_IntendedCompletionTime">{{ splitDate(jobData.d_IntendedCompletionTime)[2] }}</span> 日
                        <span v-if="jobData.d_IntendedCompletionTime">{{ splitDate(jobData.d_IntendedCompletionTime)[3] }}</span> 时
                        <span v-if="jobData.d_IntendedCompletionTime">{{ splitDate(jobData.d_IntendedCompletionTime)[4] }}</span> 分
                    </p>
                </div>
            </li>

            <li>
                <div class="fire-col" style="width: 10%;">
                    <p class="same-s">序号</p>
                </div>
                <div class="fire-col" style="width: 70%;">
                    <p class="same-s">安全措施</p>
                </div>
                <div class="fire-col" style="width: 10%;">
                    <p class="same-s">是否涉及</p>
                </div>
                <div class="fire-col" style="width: 10%;">
                    <p class="same-s">确认人</p>
                </div>
            </li>

            <li v-if="jobData.jobSafetyPrecautions && jobData.jobSafetyPrecautions.length !== 0" v-for="item in jobData.jobSafetyPrecautions" :key="item.id">
                <div class="fire-col" style="width: 10%;">
                    <p class="same-s">{{ item.n_Sort }}</p>
                </div>
                <div class="fire-col" style="width: 70%;">
                    <p class="same-s left-p">{{ item.v_SafetyPrecaution }}</p>
                </div>
                <div class="fire-col" style="width: 10%;">
                    <template v-if="item.l_ConfirmerSingFileId">
                        <p class="same-s" v-if="item.isInvolve">是</p>
                        <p class="same-s" v-else>否</p>
                    </template>
                </div>
                <div class="fire-col" style="width: 10%;">
                    <p v-if="item.l_ConfirmerId" class="same-s">
                        <img style="display: block; margin: auto; width: auto; height: 15px;" :src="baseUrl + 'api/Upload' + ideView +  item.v_FileObjectName" />    
                    </p>
                </div>
            </li>
            <li>
                <div v-if="jobData.jobSafetyPrecautions && jobData.jobSafetyPrecautions.length !== 0" class="fire-col" style="width: 10%;">
                    <p class="same-s">{{ jobData.jobSafetyPrecautions.length + 1 }}</p>
                </div>
                <div v-if="jobData.jobSafetyPrecautions && jobData.jobSafetyPrecautions.length !== 0" class="fire-col" style="width: 90%;">
                    <div style="width: 100%;;display: flex;">
                        <div style="width: 75%;">
                            <p class="same-s left-p" style="height: 45px;">其他安全措施：<span v-if="jobData.v_SafetyPreOther">{{ jobData.v_SafetyPreOther }}</span></p>
                        </div>
                        <div style="width: 25%;">
                            <p style="display: flex;align-items: flex-end;height: 45px;" class="same-s left-p">编制人：
                                <span style="display: flex;flex-direction: column; justify-content: center; align-items: center;height: 45px;" v-if="jobData.l_SafetyPreSingFileId">
                                    <img style="display: block; width: auto; height: 30px;" :src="jobData.v_SafetyPreSingFilePath" />
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
            </li>

            <li>
                <div class="fire-col" style="width: 10%;">
                    <p class="same-s" style="">安全交底人</p>
                </div>
                <div class="fire-col" style="width: 30%;">
                    <p class="same-s" style="height: 40px;line-height: 40px;"><span v-if="jobData.l_ConfessorSingFileId">{{ jobData.v_ConfessorName }}</span></p>
                </div>
                <div class="fire-col" style="width: 10%;">
                    <p class="same-s" style="">接受交底人</p>
                </div>
                <div class="fire-col" style="width: 50%;">
                    <p class="same-s" style="height: 40px;line-height: 40px;">
                        <span style="display: flex;justify-content: flex-start;align-items: center;width: 25%; height: 100%;" v-if="jobData.acceptConfessions && jobData.acceptConfessions.length !== 0" v-for="item in jobData.acceptConfessions" :key="item.id">
                            <img v-if="item.l_AcceptConfessionSingFileId" style="display: block; width: auto; height: 24px;margin-left: 5px;" :src="item.v_AcceptConfessionSingFilePath" />
                        </span>
                    </p>
                </div>
            </li>

            <li v-if="jobData.jobApplyChecks && jobData.jobApplyChecks.length !== 0" v-for="item in jobData.jobApplyChecks" :key="item.id">
                <div style="width: 60%;">
                    <p class="same-s left-p" style="height: 40px;">{{ item.v_NodeName }}<span>{{ item.v_AuditOpinions }}</span></p>
                </div>
                <div style="width: 20%;">
                    <p class="same-s left-p" style="height: 40px; display: flex; align-items: flex-end;">签字：
                        <span style="display: block; width: 55%;height: 55%;">
                            <img v-if="item.l_AuditorSingFileId" style="display: block; width: auto; height: 20px;" :src="item.v_AuditorSingFilePath" />
                        </span>
                    </p>
                </div>
                <div style="width: 20%; border-right: 1px solid #191919; padding-right: 5px; display: flex; align-items: flex-end;">
                    <p class="same-s" style="display: flex;">
                        <span style="display: block;width: 40px;"><span v-if="item.d_AuditTime">{{ splitDate(item.d_AuditTime)[0] }}</span></span>年
                        <span style="display: block;width: 40px;"><span v-if="item.d_AuditTime">{{ splitDate(item.d_AuditTime)[1] }}</span></span>月
                        <span style="display: block;width: 40px;"><span v-if="item.d_AuditTime">{{ splitDate(item.d_AuditTime)[2] }}</span></span>日
                        <span style="display: block;width: 40px;"><span v-if="item.d_AuditTime">{{ splitDate(item.d_AuditTime)[3] }}</span></span>时
                        <span style="display: block;width: 40px;"><span v-if="item.d_AuditTime">{{ splitDate(item.d_AuditTime)[4] }}</span></span>分
                    </p>
                </div>
            </li>
            <li v-if="jobData.jobApplyChecks && jobData.jobApplyChecks.length !== 0">
                <div style="width: 60%;">
                    <p class="same-s left-p" style="height: 40px;">完工验收<span v-if="jobData.v_AcceptanceOpinions">{{ jobData.v_AcceptanceOpinions }}</span></p>
                </div>
                <div style="width: 20%;">
                    <p class="same-s left-p" style="height: 40px; display: flex; align-items: flex-end;">签字：
                        <span style="display: block;width: 55%; height: 55%;" v-if="jobData.l_AcceptorSingFileId">
                            <img style="display: block; width: auto; height: 20px;" :src="jobData.v_AcceptorSingFilePath" />
                        </span>
                    </p>
                </div>
                <div style="width: 20%; border-right: 1px solid #191919; padding-right: 5px; display: flex; align-items: flex-end;">
                    <p class="same-s" style="display: flex;">
                        <span style="display: block;width: 40px;"><p v-if="jobData.d_AcceptanceTime">{{ splitDate(jobData.d_AcceptanceTime)[0] }}</p></span>年
                        <span style="display: block;width: 40px;"><p v-if="jobData.d_AcceptanceTime">{{ splitDate(jobData.d_AcceptanceTime)[1] }}</p></span>月
                        <span style="display: block;width: 40px;"><p v-if="jobData.d_AcceptanceTime">{{ splitDate(jobData.d_AcceptanceTime)[2] }}</p></span>日
                        <span style="display: block;width: 40px;"><p v-if="jobData.d_AcceptanceTime">{{ splitDate(jobData.d_AcceptanceTime)[3] }}</p></span>时
                        <span style="display: block;width: 40px;"><p v-if="jobData.d_AcceptanceTime">{{ splitDate(jobData.d_AcceptanceTime)[4] }}</p></span>分
                    </p>
                </div>
            </li>
        </ul>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref, onMounted , reactive , watch, nextTick , toRefs , watchEffect } from 'vue';
import { splitDate } from '/@/utils/exportToExcel';
import { sysDictDataList } from '/@/api/centerControl/pubilc';
export default defineComponent({
    name: 'fire-top',
    components: {},
    props: {
        repairInfo: {
            type: String,
            default: '',
        }
    },
    setup(props,ctx){
        const state = reactive({
            jobData: {} as any,
        });

        onMounted(() => {
            nextTick(() => {
                state.jobData = JSON.parse(props.repairInfo);
            });
        });
        return {
            ...toRefs(state),
            splitDate: splitDate,
            baseUrl: import.meta.env.VITE_API_URL as any,
            ideView: import.meta.env.VITE_APP_API_VIEW_IDE,
        }
    }
})
</script>
<style scoped lang="scss">
:deep(.el-checkbox__label){
    padding-left: 0;
    font-size: 12px;
    margin-right: 10px;
}
#fire-top{
    color: #191919;
    font-family: "宋体";
    font-size: 10px;
    ul{
        width: 100%;
    }
    ul, li {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    ul{
        border-top: 1px solid #191919;
        border-left: 1px solid #191919;
    }
    li{
        display: flex;
        align-items: slietch;
        border-bottom: 1px solid #191919;
    }
    .fire-col{
        border-right: 1px solid #191919;
        display: flex;
        align-items: center;
    }
    .same-s{
        width: 100%;
        text-align: center;
        height: auto;
        padding: 2px 0;
    }
    .left-p{
        text-align: left;
        padding: 5px 0 5px 8px;
    }
}
</style>